<template>
  <div
    class="container-fluid"
    style="background-color: #f2f2f2; height: inherit">
    <div class="row">
      <div class="col col-lg-10"  style="background-color: white; width:90%; margin: 20px auto" >
        <ul class="first">
          <li><label for="">全选：<span  :class="['ckb',allChecked?'ckb_s':'ckb']" @click="choseAll()"></span></label></li>
          <li>商品信息</li>
          <li>单价</li>
          <li>数量</li>
          <li>金额</li>
          <li>操作</li>
        </ul>
      </div>
    </div>

    <div
      class="row"
      style="background-color: white; width: 90%; margin: 0px auto">
      <div class="col col-lg-12" style="margin: 0 auto"  v-for="(item, index) in goods.slice(0,4)" :key="index">
        <div class="row mt-3">
          <div class="col col-lg-4">
          </div>
          <div class="col col-lg-7"></div>
        </div>

        <div  class="row mb-2 mt-3 " :class="['third',item.isChecked?'third_red':'']">
          <div class="col col-lg-6">
            <div class="row" style="display: flex; align-items: center">
              <div class="col col-lg-2">
                <label for="">  <span :class="['ckb',item.isChecked?'ckb_s':'ckb']" @click="checkPeoduct(item)"></span>
                </label>
              </div>
              <div class="col col-lg-5">
                <img :src="item.img"  style="width:100%; height: 140px; margin: 20px 0 20px 0" />
              </div>
              <div class="col col-lg-3">
                <strong style="font-size: 16px;overflow: hidden;display: block;width:100%;text-align: left; ">【{{ item.text1 }}】</strong><br />
                <small style="text-align: left;display: block;width:100%;  font-size: 13px;overflow: hidden;height: 52px;">{{ item.text2 }}</small>
              </div>
            </div>
          </div>

          <div class="col col-lg-1">
            <span>{{ item.money }}元/盒</span>
          </div>

          <div class="col col-lg-2" id="span">
            <span class="sub" @click="drecrementCount(item)">-</span>
            <span class="input_1"><input class="real" type="text" v-model.number="item.count" /></span>
            <span class="add" @click="incrementCount(item)">+</span>
          </div>
          <div class="col col-lg-1">
            <span>{{item.count*item.money}}元</span>
          </div>
          <div class="col col-lg-2">
            <small @click=" removeProduct(item)">删除</small>
          </div>
        </div>
      </div>
    </div>

    <div class="row mb-2 operate">
      <div class="col col-lg-3">
        <label style="font-size: 12px; color: red" @click="removeAll()">全部删除</label>
      </div>
      <div class="col col-lg-3"></div>
      <div class="col col-lg-6">
        <div class="row" style="align-items: center">
          <div class="col col-lg-3">
            <small style="font-size: 12px">已选择商品<span style="font-size: 20px">{{countNumber}}</span>件</small
            >
          </div>
          <div class="col col-lg-5">
            <small style="font-size: 12px"
              >合计（不含运费）:
              <span style="font-size: 22px">￥{{ sumPrice }}</span>
            </small>
          </div>
          <div class="col col-lg-4">
            <a :class="['right',countNumber==0?'right':'right_red']" @click="gotoGoods(list)">结算</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      allChecked: false, //默认没有选上
      isChecked: false,
      id:'',
      name:'',
      list:[],
      goods: [
        {
          id: 1,
          text1: '芝士蛋糕',
          text2:
            '口感和风味的各种辅料，冷冻后食用其味无穷，成为蛋糕中的极品。慕斯与布丁一样属于甜点的一种，其性质较布丁更柔软，入口即化',
          money: 80,
          count:1,
          tatalPrice:80,
          isChecked:false,
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs2.best-wallpaper.net%2Fwallpaper%2F1920x1080%2F1902%2FOne-slice-of-fruit-cake-blueberries-raspberries_1920x1080.jpg&refer=http%3A%2F%2Fs2.best-wallpaper.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659578294&t=fa0143a5580560612af797fca423e4f7',
        },
        {
          id: 2,
          text1: '草莓蛋糕',
          text2:
            '口感和风味的各种辅料，冷冻后食用其味无穷，成为蛋糕中的极品。慕斯与布丁一样属于甜点的一种，其性质较布丁更柔软，入口即化',
          money: 36,
          count:2,
          totalPrice:72,
          isChecked:false,
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fbg_w1180%2F00%2F14%2F43%2F8qb12yuWbb.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659578294&t=084a24b3654eb5e4a7fad40c426d12db',
        },
      ],
    };
  },
  computed: {
    //计算选择的商品数量
    countNumber() {
      let countNumber = 0;
      this.goods.forEach((item) => {
        if(item.isChecked){
          countNumber += item.count
        console.log('数量',countNumber);
        }
      });
      console.log('1111111111',typeof(countNumber));
      return countNumber;
    },

    //计算商品总价
    sumPrice() {
      let sum = 0;
      this.goods.forEach((item) => {
        if(item.isChecked){
          sum += item.money*item.count
        }
      });
      return sum;
    },
    getGoods(){
      this.$router.push('/goumai')
    }
  },
  methods: {
    //减少商品数量
    drecrementCount(item) {
      if (item.count >= 1) {
        item.count -= 1;
      }
    },
    //增加商品数量
    incrementCount(item) {
      item.count++;
    },

    //删除商品
    removeProduct(item) {
      this.goods.splice(item, 1);
      // if (item.products.length <= 0) {
      //   this.goods.splice(item, 1);
      // }
    },
    //选择商品
       checkPeoduct(item){
        let i = 0
        item.isChecked =!item.isChecked
        this.goods.forEach(item=>{
          if(item.isChecked){
            i++
          }
        })
        if(i===this.goods.length){
          this.allChecked=true
        }else{
          this.allChecked=false
        }
       },
    //全选
    choseAll() {
      this.allChecked = !this.allChecked;
      this.goods.forEach((item) => {
        item.isChecked = this.allChecked;
        // item.isChecked=true
      });
    },
    //一键删除
    removeAll() {
      this.goods = [];
    },
    gotoGoods(list) {
      console.log('去订单页',list.static);
        this.$router.push({
        name: 'file',
        params: {
          id:list.id,
          text1:list.text1,
          text2:list.text2,
          money:list.money,
          count:list.count,
          totalPrice:list.totalPrice,
          isChecked:list.isChecked,
          img:list.img,
          static:list.static
        },
        })
        alert('结算成功') 
    },
  },
    mounted(){
      if(!this.$store.state.userInfo.name){
        alert('请先登录')
        this.$router.push('/login')
      }
      if(this.$route.params.id){
        this.list.id=this.$route.params.id;
        this.list.text1=this.$route.params.text1;
        this.list.text2=this.$route.params.text2;
        this.list.money=this.$route.params.money;
        this.list.count=Number(this.$route.params.count);
        this.list.totalPrice=this.$route.params.totalPrice;
        this.list.isChecked=this.$route.params.isChecked;
        this.list.img=this.$route.params.img;
        this.list.static=this.$route.params.static
        let good=this.list
        console.log('购物车',good);
        this.goods.unshift({...good}) 
      }
      
    }
};
</script>

<style lang="scss" scoped>
.first li {
  list-style: none;
  float: left;
  margin: 20px;
}
.first li:nth-child(2) {
  width:200px;
  margin: 20px;
}
.first li:nth-child(3) {
  width: 150px;
  margin: 20px;
}
.first li:nth-child(4) {
  width: 60px;
  margin: 20px;
}
.first li:nth-child(5) {
  width: 140px;
  margin: 20px;
}
.first li:nth-child(6) {
  width: 60px;
  margin: 20px;
}
.sub {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000;
  width: 17px;
  border: 1px solid #e5e5e5;
}
.add {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000;
  width: 17px;
  border: 1px solid #e5e5e5;
}
.third {
  border: 1px solid gainsboro;
  // display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}
.third_red {
  background-color: rgba(243, 202, 249, 0.6);
  display: flex;
  align-items: center;
}
.real {
  width: 30px;
  // border: 1px solid #aaa;
  text-align: center;
}
.ckb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid #b8b4b4;
  display: inline-block;
  cursor: pointer;
  vertical-align: text-bottom;
}

.ckb_s {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  background: url('../assets/gouico.png') no-repeat 0 0;
  background-size: 1.1rem;
  border: 0;
  vertical-align: text-bottom;
}

.operate {
  background-color: #e6e6e6;
  height: 60px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  position: sticky;
  bottom: 0;
  left: 0;
}
.right {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  width: 160px;
  color: #fff;
  font-size: 20px;
  background: #b8b4b4;
  margin-left: 30px;
}
.right_red {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  width: 160px;
  color: #fff;
  font-size: 20px;
  background: red;
  margin-left: 30px;
}
</style>
